forum

Home / DeveloperSection / Forums / How to use Multiple ng-App in a single Page

Ask Question

How to use Multiple ng-App in a single Page

Anonymous User179722-Feb-2016
We want to use  to use Multiple ng-App  in a single Page. How to do this please help me.
angular jsjquery angular js 
Updated on 22-Feb-2016
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

22-Feb-2016
js file: 
@{
    Layout = null;
}
 
<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <scriptsrc="~/Scripts/jquery-1.9.1.js"></script>
    <scriptsrc="~/Scripts/angular.js"></script>
 
    <title>Forum</title>
</head>
<body>
    <divid="App1"ng-app="shoppingCart"ng-controller="ShoppingCartController">
        <h1>Your order</h1>
        <table>
            <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbodyng-repeat="item in items">
                <tr>
                    <td>{{item.product_name}}</td>
                    <td>{{item.price|currency}}</td>
                    <td>
                        <buttonng-click="remove($index);">Remove</button>
                    </td>
 
                </tr>
            </tbody>
 
        </table>
 
    </div>
    <divid="App2"ng-app="namesList"ng-controller="NamesController">
        <h1>Customer Details</h1>
       Name: <inputid="name"type="text"ng-model="Name"/>
        <br/>
      Email:  <inputid="email"type="text"ng-model="Email"/>
        <br/>
       Contact:  <inputid="contact"type="text"ng-model="mobile_no"/>
    </div>
    <script>
        var shoppingCartModule = angular.module("shoppingCart", [])
        shoppingCartModule.controller("ShoppingCartController", function ($scope) {
            $scope.items = [
                  {
                      product_name: "HP Pavilion 15-ab216TX Notebook",
                      price: 48500
                  },
                  {
                      product_name: "HP 15-AC116TX Laptop",
                      price: 36299
                  },
                  {
                      product_name: "HP 15-AC119TX Laptop",
                      price: 39799
                  },
                  {
                      product_name: "HP 15-ac118tu Notebook",
                      price: 18999
                  },
                   {
                       product_name: "HP 15-AF114AU Notebook",
                       price: 25489
                   },
            ];
            $scope.remove = function (index) {
                $scope.items.splice(index, 1);
            }
        });
        var namesModule = angular.module("namesList", [])
        namesModule.controller("NamesController", function ($scope) {
            $scope.Name = "Aditya Kumar";
            $scope.Email = "adityasingh06630@@gmail.com";
            $scope.mobile_no = "8953249451";
        });
        angular.bootstrap(document.getElementById("App2"), ['namesList']);
    </script>
</body>
 
</html>

Output:


Liked By